<template>
  <div>
    <div>
      <Navigation></Navigation>
    </div>
    <div class="content-top">
      <el-carousel height="450px">
        <el-carousel-item v-for="item in imgs" :key="item">
          <img :src="item.img" style="width: 100%; height: 100%" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="content">
      <div class="content-text">
        <div class="content-text-header">
          <span>推荐竞赛</span>
        </div>
        <div>
          <el-button type="primary" round>热门</el-button>
          <el-button type="primary" round>最新</el-button>
        </div>
        <div class="content-text-content">
          <div
            class="content-text-competition"
            v-for="item in competition"
            :key="item"
          >
            <div class="competition-img">
              <el-image :src="'http://123.249.101.250:3000/static/'+item.face" style="width: 100%; height: 100px"></el-image>
              <!-- <img :src="item.face"  /> -->
            </div>
            <div class="competition-title">
              <span>{{ item.name }}</span>
            </div>
            <div class="competition-host-date">
              <div class="competition-host-date-left">
                <p>主办方：{{ item.sponsor }}</p>
                <p>报名时间：{{ item.signstartdate }}-{{ item.signenddate }}</p>
              </div>
              <div class="competition-host-date-right">
                <el-button round @click="signup(item.id)">点击报名</el-button>
              </div>
            </div>
          </div>
        </div>
        
      </div>
      <div class="content-activity">
        <div class="content-text-header">
          <span>推荐活动</span>
        </div>
        <div>
          <el-button type="primary" round>热门</el-button>
          <el-button type="primary" round>最新</el-button>
        </div>
        <div class="content-text-content">
          <div
            class="content-text-competition"
            v-for="item in activity"
            :key="item"
          >
            <div class="competition-img">
              <el-image :src="'http://123.249.101.250:3000/static/'+item.face" style="width: 100%; height: 100px"></el-image>
            </div>
            <div class="competition-title">
              <span>{{ item.name }}</span>
            </div>
            <div class="competition-host-date">
              <div>
                <p>主办方：{{ item.sponsor }}</p>
                <p>报名时间：{{ item.signstartdate }}-{{ item.signenddate }}</p>
              </div>
              <div>
                <el-button round @click="signup(item.id)">点击报名</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <bottom></bottom>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import image1 from "@/assets/big.png";
import image2 from "@/assets/big2.png";
import router from "@/router";
import axios from "axios";
const imgs = ref([{ img: image1 }, { img: image2 }]);

const signup = (id) => {
  router.push({
    path: "/information",
    query:{id:id}
  });
};

const competitionInfo = ref([]);
const competition = ref([])
const activityInfo = ref([])
const activity = ref([])



const query = () => {
  axios
    .get(
      "http://localhost:3000/TbCompetitionActivityController/selectTbCompetiyionActive/001"
    )
    .then((res) => {
      competitionInfo.value = res.data.data;
      competition.value = competitionInfo.value.slice(0,8)
      console.log(competitionInfo.value);
      
    });
    axios
    .get(
      "http://localhost:3000/TbCompetitionActivityController/selectTbCompetiyionActive/002"
    )
    .then((res) => {
      console.log(res);
      activityInfo.value = res.data.data;
      activity.value = activityInfo.value.slice(0,8)
    });
};

onMounted(() => {
  query();
});
</script>

<style scoped>
.content-top {
  margin-top: 60px;
}

.content-text {
  width: 1200px;
  /* background-color: aliceblue; */
  margin: auto;
}

.content-text-competition {
  width: 280px;
  box-shadow: 0 0 1px 1px #f3f2f2;
}

.content-text-header {
  padding-top: 20px;
  padding-bottom: 10px;
}

.content-text-header span {
  font-size: 25px;
}

.content-text-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-top: 20px;
}

.competition-title span {
  font-weight: 700;
}

.competition-host-date {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.competition-host-date p {
  font-size: 11px;
  color: darkgray;
}

.content-activity {
  width: 1200px;
  /* background-color: aliceblue; */
  margin: auto;
}

.page-content {
  flex: 1;
  padding: 20px;
}
</style>